<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>建议使用信管帮APP</title>
    <!-- 设计稿iPhone XR 414 html基础font-size=41.1px -->
    <!-- 该页面跳转缓慢，取消base64图片素材方法，采用webp图片素材格式 -->
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        ul li{
            list-style: none;
        }
        a{
            text-decoration: none;
            
        }
        a:link{
            color: #404040;
        }
        a:visited{
            color: #404040;
        }
        a:hover{
            color: #404040;
        }
        a:active{
            color: #404040;
        }
        ::-webkit-scrollbar{
            /* width: 0; 移动端取消滚动条无效*/
            display: none;
        }
        body{
            /*
            background: #ff8b8b;*//*#2493f1*/
            /**/
            background: linear-gradient(120deg, #ff8b8b 35%, #ffa1a1 35%, #ff8b8b 45%,  #ffa1a1 45%);
            
            /*
            background: linear-gradient(120deg, #2a9eff 35%, #48acff 35%, #2a9eff 45%,  #48acff 45%);
            */
            display: flex;
            flex-direction: column;
            font-family: 微软雅黑;
            font-size: .3865rem;
            letter-spacing: .0169rem;
            position: relative;
            overflow: hidden;/*禁止上下滑动*/
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }
        .header_bg{
            /*
            border: 1px solid red;*/
            width: 100%;
            height: 4.9517rem;
            background: url(../../images/person/person_senter/person_bg.webp) no-repeat;
            background-size: cover;
            background-position: center;
            opacity: 0.2;
            position: absolute;
            z-index: 5;

        }
        header{/*
            border: 1px solid red;*/
            height: 4.9517rem;
            position: relative;
            z-index: 10;
        }
        
        .person{/*
            border: 1px solid red;*/
            position: absolute;
            bottom: .3623rem;
            width: 100%;
            display: flex;
            color: #FFF;
        }
        .userImg{
            border: .0725rem solid rgb(255, 255, 255);
            background: url(../../images/person/person_senter/defaultUserImg.webp) center no-repeat;
            background-size: cover;
            width: 1.9324rem;
            height: 1.9324rem;
            border-radius: 50%;
            box-shadow: .1208rem .1208rem .1449rem rgba(91, 91, 91, 0.441);
            margin: 0 .4348rem 0 .6763rem;
        }
        /*头像框*/
        /*
        .txk{
            width: 3.3816rem;
            height: 3.3816rem;
            position: absolute;
            margin-top: -1.0145rem;
            margin-left: -0.0362rem;
            background: url(../../images/person/person_senter/txk_icon1.png) no-repeat;
            background-size: contain;

        }*/
        .userInformation{/*
            border: 1px solid red;*/
            flex: 1;
            display: flex;
            flex-direction: row;
            align-items: center;
        }
        .userInformation>div{/*
            border: 1px solid green;*/
            display: flex;
            flex-direction: column;
            
        }
        .userInformation>div:first-child{
            width: 100%;
        }
        .goIcon{
            width: .6039rem;
            height: .6039rem;
            background: url();
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            margin: 0 .3623rem 0 0;
        }
        .nicheng{
            font-size: .4831rem;
            font-weight: 600;
            margin-bottom: .1208rem;
        }
        .othermessage{
            /*
            border: 1px solid red;*/
            color: rgba(255, 255, 255, 0.945);
            width: 5.6763rem;
            display: inline-block;/**/
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: .3623rem;
        }
        section{/*
            border: 1px solid red;*/
            border-top-left-radius:  .3623rem;
            border-top-right-radius:  .3623rem;
            flex: 1;
            background-color: #f4f4f4;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        section ul:first-child{
            margin-top: .4831rem;
        }
        section .ul{
            /*
            border: 1px solid green;*/
            border-radius: .1932rem;
            overflow: hidden;
            width: 90%;
            margin: .2415rem 0;
            background: #FFF;
            font-size: .4348rem;
            box-shadow: .0725rem .0725rem .1208rem rgba(63, 63, 63, 0.075);
        }
        section .ul li{
            /*
            border: 1px solid red;*/
            width: 100%;
            height: 1.087rem;
            display: flex;
            flex-direction: row;
            justify-content: left;
            align-items: center;
            border-bottom: .0121rem solid rgba(142, 142, 142, 0.296);
            overflow: hidden;
            color: #404040;
        }
        section .ul li:last-child{
            border-bottom: none;
        }
        section .ul li a{
            all: unset;
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: left;
            align-items: center;
            height: 100%;
        }
        section .ul li div:first-child{
            /*
            border: 1px solid green;*/
            width: 1.2077rem;
            height: 1.2077rem;
            margin: 0 .0242rem 0 .0242rem;
            transform: scale(0.53);
            background-size: 4.8309rem 2.4155rem;
        }
        .realName{
            font-size: .3865rem;
            color: #565656;
            margin-left: .4831rem;
        }

        .icon1{
            background: url(../../images/person/person_senter/person-icons.webp) no-repeat;
            background-position: -0rem -0rem;
            
        }
        .icon2{
            background: url(../../images/person/person_senter/person-icons.webp) no-repeat;
            background-position: -1.2077rem -0rem;
        }
        .icon3{
            background: url(../../images/person/person_senter/person-icons.webp) no-repeat;
            background-position: -0rem -1.2077rem;
        }
        .icon4{
            background: url(../../images/person/person_senter/person-icons.webp) no-repeat;
            background-position: -1.2077rem -1.2077rem;
        }
        .icon5{
            background: url(../../images/person/person_senter/person-icons.webp) no-repeat;
            background-position: -2.4155rem -1.2077rem;
        }

        ul.out{
            border-radius: .1932rem;
            overflow: hidden;
            width: 90%;
            margin-top: .4831rem;
            background: #FFF;
            font-size: .4348rem;
            color: #ff4141;
        }
        ul.out li{
            width: 100%;
            height: 1.2077rem;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }









        


        /*弹窗样式*/
        
        #alert{
            position: absolute;
            width: 100%;
            height: 100%;
            background: #00000047;
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .window{
            border-radius: .2415rem;
            font-size: .4348rem;
            color: #2c2c2c;
            width: 70%;
            display: flex;
            flex-direction: column;
            align-items: center;/*
            box-sizing: border-box;
            padding: .4831rem .9662rem;*/
            background-color: #ffffff;
            overflow: hidden;
        }
        .window .alt_title{
            /*
            border: 1px solid red;*/
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;
            height: 1.087rem;
            font-weight: 600;

        }
        .window .alt_body{
            /*
            border: 1px solid red;*/
            width: 100%;/**/
            min-height: 1.9324rem;
            box-sizing: border-box;
            padding: .3623rem .4831rem .4831rem .4831rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: .4106rem;
        }
        .window .action{
            font-size: .4106rem;
        }
        .window .action1{
            /**/
            border-top: .0242rem solid rgb(207, 207, 207);
            width: 100%;
            display: flex;
            flex-direction: row;

        }
        .window .action1 div{
            width: 50%;
            height: 1.2077rem;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fb4c4c;
        }
        .window .action2{
            border-top: .0242rem solid rgb(207, 207, 207);
            width: 100%;
        }
        .window .action2 div{
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 1.2077rem;
            color: #4c97fb;
        }
        .window .action1 div:nth-child(1){
            border-right: .0121rem solid rgb(207, 207, 207);
        }
        .window .action1 div:nth-child(2){
            color: #4c97fb;
            border-left: .0121rem solid rgb(207, 207, 207);
        }
        
    </style>
    <link rel="stylesheet" href="../../css/footer.css">
    <script src="../../lib/jquery.min.js"></script>
    <script src="../../lib/vue.js"></script>
    
</head>
<body>
    <div class="header_bg"></div>
    <header>
        <div class="person">
            <div class="txk"></div>
            <div class="userImg"></div>
            <div class="userInformation">
                <div>
                    <span class="nicheng">罗密欧与忽必烈</span>
                    <span class="othermessage">点击修改头像、昵称、性别、个性签名</span>
                </div>
                <div class="goIcon"></div>
                
            </div>
        </div>
    </header>
    <section>
            <ul class="ul ul1">
                <li>
                    <a href="./zhyaq/zhyaq.html">
                        <div class="icon icon1"></div>
                        <div>账号与安全</div>
                    </a>
                </li>
                <li>
                    <a href="./smrz/smrz.html">
                        <div class="icon icon2"></div>
                        <div>实名认证<span class="realName"></span></div>
                    </a>
                </li>
            </ul>
            <ul class="ul ul2">
                <li>
                    <a href="">
                        <div  class="icon icon3" class="icon icon1"></div>
                        <div>下载APP（建设中...）</div>
                    </a>
                </li>
                <li class="ul2li2">
                    <a href="">
                        <div class="icon icon4"></div>
                        <div>反馈与投诉（建设中...）</div>
                    </a>
                </li>
                <li class="ul2li2">
                    <a href="">
                        <div class="icon icon5"></div>
                        <div>关于（建设中...）</div>
                    </a>
                </li>
            </ul>
            <ul class="out" onclick="handleOut()">
                <li>
                    <div>退出登录</div>
                </li>
            </ul>
        
    </section>


    <footer>
        <!-- 首页 -->
        <a class="nav" href="../index/index.html">
            <div class="icon"></div>
            <span>首页</span>
        </a>
        <!-- 广场 -->
        <a class="nav" href="../guangchang/guangchang.html">
            <div class="icon"></div>
            <span>广场</span>
        </a>
        <!-- 游戏 -->
        <a class="nav" href="../data/data.html">
            <div class="icon"></div>
            <span>帮友</span>
        </a>
        <!-- 我 -->
        <a class="nav active" href="../person/person.html">
            <div class="icon"></div>
            <span>我</span>
        </a>


    </footer>

    
    <!-- 弹窗 -->
    <div id="alert">
        <div class="window">
            <div class="alt_title">确定退出</div>
            <div class="alt_body">您确定要退出登录吗？</div>
            <div class="action action1">
                <div class="cancel" onclick="option(0)">取消</div>
                <div class="do" onclick="option(1)">确定</div>
            </div>
        </div>
    </div>
    

    <script>
        function handleOut(){
            console.log('outy')
            document.getElementById("alert").style.display='flex'
            console.log('outy')
        }
        function UpDateUserImg(){
            let userInfo = localStorage.getItem('XGB-user')
                if(userInfo !==null){
                    var userImg = JSON.parse(userInfo).userImg
                    var gender = JSON.parse(userInfo).gender
                    if (gender === '男'){
                        $('body').css('background', 'linear-gradient(120deg, #2a9eff 35%, #48acff 35%, #2a9eff 45%,  #48acff 45%)')
                    }
                    if (userImg !== ""){
                        $('.userImg').css({
                            background: 'url('+userImg+') center no-repeat',
                            'background-size': 'cover'
                        })
                    }
                    

                }
            }
        UpDateUserImg()
        function option(a){
            let alert = document.querySelector("#alert")
            switch (a) {
                case 0:
                    alert.style.display='none'
                    break
                case 1:
                    window.localStorage.removeItem('XGB-user')
                    alert.style.display='none'
                    window.location.replace('../login/login.html')
                    break
            }
        }
        //setInterval(UpDateUserImg(),2500)
        //$('body').click(UpDateUserImg())

        let userInfo = localStorage.getItem('XGB-user')
        let name = JSON.parse(userInfo).name
        let othermessage = JSON.parse(userInfo).signature
        let realInfo = JSON.parse(userInfo).realInfo
        if(realInfo !== undefined){
            realName = realInfo.Name
            $('.realName').text("*"+realName.substring(realName.length-1)+"（已认证）")
        }else{
            $('.realName').text('（未认证）')
        }
        
        if(name !== "") {
            $('.nicheng').text(name)
        }
        if(othermessage !== ""){
            $('.othermessage').text(othermessage)
        }
        document.addEventListener('visibilitychange',
        function(){
            if(document.visibilityState === "visible"){
                setTimeout(()=>{
                    location.reload()
                }, 1000)
            }
        }
        )
        /*
        setInterval(()=>{
            let name1 = $('.nicheng').text()
            let signature1 = $('.othermessage').text()
            let name1 = $('.nicheng').text()
            let name1 = $('.nicheng').text()
            let name1 = $('.nicheng').text()
            //let userInfo = localStorage.getItem('XGB-user')
        }, 1000)
        if(JSON.parse(userInfo).name !== )
        */

        $('.person').click(()=>{
            location.href='./edit_information/edit_information.html'
        })
        document.querySelector(".ul2 li:first-child").onclick=function (e){
            console.log(e)
        }
        $('.person').on('touchstart', function(){
            $('.person').css('opacity', 0.5)
        })
        $('.person').on('touchend', function(){
            $('.person').css('opacity', 1)
        })
        $('.out li').on('touchstart', function(){
            $('.out').css('background', '#c3c3c352')
        })
        $('.out li').on('touchend', function(){
            $('.out').css('background', '#fff')
        })



    </script>
    
    <script>
        //根据设备宽度计算html的font-size
        function resetHtmlFont(){
            //获取html对象并动态设置font-size = 设备宽度的1/10
            document.documentElement.style.fontSize = screen.width/10 + 'px';
        }
        //执行一下
        resetHtmlFont();
        //如果窗口大小改变了，则重新计算基础font-size
        window.onresize = resetHtmlFont;
    </script>
</body>
</html>